<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* padding 盒子边框到内容的距离 */
        /* padding-top -right -tottom -left */
        /* padding 一次写四个 【上 右 下 左】 padding: 10px 30px 50px 80px;*/
        /* padding 一次写三个 【上 左右 下】  padding: 10px 30px 50px ;*/
        /* padding 一次写两个 【上下 左右 】  padding: 10px 30px */
        /* padding 一次写一个 【上下左右 】   padding: 10px*/
        /* 结合 上左右40下0  小属性层叠大属性  padding:30px;paddinf-bottom:0; */


        .box1{
            width: 200px;
            height: 200px;
            padding-top:10px ;
            padding-right: 30px;
            padding-bottom: 50px;
            padding-left: 80px;
            background-color: orange;
        }
        .box2{
            width: 200px;
            height: 200px;
            padding: 10px 30px 50px 80px;
            background-color: red;
        }

    </style>
</head>
<body>
    <div class="box1">四个边距可以分别设置四个边距可以分别设置四个边距可以分别设置四个边距可以分别设置四个边距可以分别设置四个边距可以分别设置四个边距可以分别设置四个边距可以分别设置四个边距可以分别设置四个边距可以分别设置四个边距可以分别设置四个边距可以分别设置</div>
    <div class="box2">四个边距可以一起设置四个边距可以一起设置四个边距可以一起设置四个边距可以一起设置四个边距可以一起设置四个边距可以一起设置四个边距可以一起设置四个边距可以一起设置四个边距可以一起设置四个边距可以一起设置四个边距可以一起设置四个边距可以一起设置</div>
</body>
</html>